.nav-view-outer {
    --nav-parent-item-color: var(--nav-item-color);
    --nav-item-border: 2px solid var(--lines);
    --nav-item-border-width: 2px;
    --nav-item-border-color: var(--lines);
    --nav-item-color-hover: var(--text-dl);
    
    //Unset Hover Opacity
    .nav-view > .tree-item > .tree-item-children > .tree-item > .tree-item-self:hover {
        opacity: 1;
    }
    
    //Nested Levels
    & .tree-item-children {
        padding-left: 0;
        padding-bottom: 0;
        padding-top: 0;
        
        & .tree-item-children {
            padding-left: 8px;
            margin-left: 0;
            
            & .tree-item-children {
                padding-left: 21px;
                margin-left: 0;
                border-left: var(--nav-item-border-width) solid var(--nav-item-border-color);
            }
        }
    }

    //Root Folder 
    & .nav-view > .tree-item > .tree-item-children > .tree-item > .tree-item-self {
        padding-left: 5px;
        margin-left: -5px;
    }
    & .tree-item-self {
        padding-left: 12px;
        border-left: var(--nav-item-border-width) solid var(--nav-item-border-color);
        
        &:not(.mod-collapsible) { margin-left: 0; }
        &.mod-collapsible.mod-collapsible { 
            margin-bottom: 0; 
            margin-left: 0;  
            border-color: var(--lines);
        }
        &.is-clickable.is-clickable.is-clickable:hover {
            color: var(--nav-item-color-hover);
            border-color: var(--text-normal);
            background: var(--nav-item-background-hover);
        }
        & .tree-item-icon { padding-inline-end: 0; }
        
        //File
        &.mod-active,
        &:not(.mod-collapsible, .mod-active),
        &:hover:not(.mod-collapsible):not(.mod-active) { 
            border-left: var(--nav-item-border-width) solid var(--nav-item-border-color);
        }
        //Fix File Active Border Color
        &.mod-active { 
            --nav-item-border-color: var(--nav-item-border-color-active);

            //Active Icon Color
            & .tree-item-inner.tree-item-inner::before {
                --file-icon-color: var(--nav-item-color-active);
            }
        }
    }


    // & .tree-item-children .tree-item > .tree-item-children .tree-item-self:not(.mod-collapsible) {
    //     padding-left: 10px;
    // }
    & .tree-item-icon.collapse-icon {
        visibility: hidden;
        display: none;
    }


    //File Icons
    & .tree-item-self[data-path$=".md"] .tree-item-inner::before,
    & .tree-item-self:not([data-path$=".md"]) .tree-item-inner::before {
        margin-left: 3px;
        padding-right: 4px;
        font-weight: 100;
    }
    & .tree-item-self:hover .tree-item-inner.tree-item-inner::before { color: var(--nav-item-color-hover); }
    
    & .tree-item-self:not([data-path$=".md"]) .tree-item-inner::before {
        content: var(--folder-icon);
        font-family: var(--folder-font);
        color: var(--folder);
    }
    & .tree-item-self[data-path$=".md"] .tree-item-inner::before {
        content: var(--file-icon);
        font-family: var(--file-font);
        color: var(--file-icon-color);
    }
} 
    
@media screen and (max-width: 750px) {
    .nav-view-outer .tree-item-children .tree-item-self.mod-collapsible.is-clickable {
        padding-left: 18px;
    }
}